<template>
	<view class="page">
		<image class="img1" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hyt.png" mode=""></image>
		<view class="t1">欢迎来到「稻浪同歌」，一个贯通线上与线下的多元成长社区。我们相信，真实的生活，始于与同频的人一起探索、分享、创造。</view>
		<view class="block">
			<view class="n_block">
				<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy3.png" mode=""></image>
				<view class="tr">
					<view class="">
						年卡 ￥
						<text>168</text>
					</view>
					<view class="">一张年卡，解锁全年专属权益与精彩</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="block_1">
				<view class="flex toptit">
					<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hyt1.png" mode=""></image>
					<view class="title">「会员权益：畅享活动礼遇」</view>
				</view>
				<view class="tss">支付168元/年会员费，参与全球线上+本地线下所有主题活动</view>
				<view class="x"></view>
				<view class="tss">专享博物馆公益讲解、演出票务优惠、副业机会推荐等礼遇</view>
			</view>
		</view>
		<view class="block">
			<view class="block_1">
				<view class="flex toptit">
					<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hyt2.png" mode=""></image>
					<view class="title">「五大维度：涵养多元热爱」</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">思想漫游</view>
					<view class="tr">书籍讨论、影视沙龙、主题分享</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">文化深潜</view>
					<view class="tr">文博观展、手作体验、城市探索</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">亲子成长</view>
					<view class="tr">亲子阅读、创意课堂、家庭工坊</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">活力生活</view>
					<view class="tr">城市漫步、户外运动、主题市集</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">公益向善</view>
					<view class="tr">志愿服务、知识分享、社区共建</view>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="block_1">
				<view class="flex toptit">
					<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hyt3.png" mode=""></image>
					<view class="title">「专属价值：赋能个人成长」</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">自主发起活动</view>
					<view class="tr">自主策划并发起感兴趣的活动</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">加入会员社群</view>
					<view class="tr">加入高质量同频交流会员社群</view>
				</view>
				<view class="item_ts flex">
					<view class="tl">记录成长足迹</view>
					<view class="tr">积分稻穗值兑换文创纪念好礼</view>
				</view>
			</view>
		</view>

		<view class="block">
			<view class="block_1">
				<view class="flex toptit">
					<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hyt4.png" mode=""></image>
					<view class="title">「名字寓意：传递社区承诺」</view>
				</view>
				<view class="item_ts flex">
					<view class="tr">如「稻」般谦卑扎根，将知识深种生活沃土</view>
				</view>
				<view class="item_ts flex">
					<view class="tr">如「浪」般开放探索，向世界拥抱无限宽广</view>
				</view>
				<view class="item_ts flex">
					<view class="tr">如「同」般真诚共鸣，让思想在碰撞中点亮</view>
				</view>
				<view class="item_ts flex">
					<view class="tr">如「歌」般激情共创，将时光谱成温暖乐章</view>
				</view>
			</view>
		</view>
		<view class="bottom_text">
			<image src="/static/lll.png" mode=""></image>
			<view class="tss">
				<view class="">期待与你相遇，</view>
				<view class="">在这片自由、温暖、丰盈的人生田野中，</view>
				<view class="">同频相伴，自在生长！</view>
			</view>
			<image src="/static/rrr.png" mode=""></image>
		</view>
		<view class="hy_btns_zw">
			
		</view>
		<view class="hy_btns">
			<view class="cont">
				<view class="select">
					<image src="/static/select.png" mode=""></image>
					<image src="/static/select_a.png" mode=""></image>
		
					我同意并了解《会员服务协议》
				</view>
				<view class="onebtns" @click="open">￥168/年 立即开通</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
</script>
<style lang="scss">
.page {
	width: 100%;
	height: 100vh;
	overflow: auto;
	background: linear-gradient(180deg, #ece6d5 0%, #fbfcf9 86%);
	.img1 {
		width: 670rpx;
		height: 224rpx;
		display: block;
		margin: 0rpx auto;
	}
	.t1 {
		margin: 12rpx auto;
		width: 670rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
	}
	.block {
		width: 710rpx;
		background: #f5f4ee;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 12rpx 10rpx;
		box-sizing: border-box;
		.n_block {
			width: 690rpx;
			height: 156rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			image {
				width: 134rpx;
				height: 100rpx;
				margin-right: 16rpx;
			}
			.tr {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				text {
					font-family: 'DIN-BOLD';
					font-weight: bold;
					font-size: 48rpx;
					color: #75613e;
				}
			}
		}
	}
	.block_1 {
		width: 690rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1px solid #ffffff;
		margin: 0 auto;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		.tss {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			margin-top: 15rpx;
		}
		.item_ts {
			margin: 30rpx auto;
			.tl {
				height: 48rpx;
				background: linear-gradient(270deg, #d8c6a7 0%, #896422 100%);
				border-radius: 0rpx 4rpx 4rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 48rpx;
				text-align: center;
				margin-right: 20rpx;
				padding: 0rpx 10rpx;
			}
			.tr {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #75613e;
			}
		}
		.item_ts:last-child {
			margin-bottom: 0rpx;
		}
	}
	.x {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed #b19561;
		margin-top: 15rpx;
	}
	.toptit {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #b19561;
		margin-bottom: 15rpx;
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	.title {
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		background: linear-gradient(0deg, #75613e 0%, #dbb674 100%);
		/* 将背景裁剪到文字区域 */
		-webkit-background-clip: text; /* 兼容 Safari/Chrome 等webkit内核浏览器 */
		background-clip: text;
		/* 将文字颜色设为透明，显示背景渐变 */
		-webkit-text-fill-color: transparent; /* 兼容webkit内核 */
		text-fill-color: transparent;
	}
}
.bottom_text {
	width: 710rpx;
	margin: 40rpx auto;
	padding: 24rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 20rpx;
	image {
		width: 58rpx;
		height: 72rpx;
		margin-top: 40rpx;
	}
	.tss {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #75613e;
		text-align: center;
	}
}

.hy_btns_zw {
	height: 180rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.hy_btns {
	width: 750rpx;
	min-height: 180rpx;
	background: #ffffff;
	box-shadow: 0rpx 1px 10rpx 0rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 0%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 998;
	.cont {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		min-height: 180rpx;
		color: #000000;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		align-items: center;
		.select {
			margin-bottom: 18rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.onebtns {
			width: 710rpx;
			height: 80rpx;
			background: #e3d0ad;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #75613e;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}
		.active {
			background: #d8c6a7;
			color: #75613e;
		}
	}
}
</style>
